<template>
  <view class="content">
    <view class="row">
      <text class="tit">收货人</text>
      <input
        class="input"
        type="text"
        v-model="addressData.realName"
        placeholder="姓名"
        placeholder-class="placeholder"
      />
    </view>
    <view class="row">
      <text class="tit">手机号</text>
      <input
        class="input"
        type="number"
        v-model="addressData.phone"
        placeholder="手机号码"
        placeholder-class="placeholder"
      />
    </view>

    <view class="row">
      <text class="tit">所在地区</text>
      <input
        class="input addressInput"
        @click="showAddress = true"
        type="text"
        disabled
        v-model="planLocate"
        placeholder="选择省市区"
        placeholder-class="placeholder"
      />
      <u-icon name="arrow-right" class="arrow_right"></u-icon>
    </view>
    <view class="row">
      <text class="tit">详细地址</text>
      <!-- <text class="input">
        {{addressData.addressName}}
      </text> -->
      <textarea
        class="inputAddress"
        type="text"
        v-model="addressData.detail"
        placeholder="小区楼栋号"
        placeholder-class="placeholder"
      />
      <!-- <view class="dingwei_box" @click="chooseLocation">
        <text class="theme address-icon iconfont icon-a-locationhl"></text>
        <text class="">定位</text>
      </view> -->
    </view>

    <view class="row default-row">
      <text class="tit">设为默认</text>
      <switch
        :checked="addressData.isDefault"
        color="#FF5900"
        @change="switchChange"
      />
    </view>
    <button class="add-btn" @click="confirm">保存</button>
    <!-- 地址三级联动 -->
    <AddressPicker
      :show="showAddress"
      @close="showAddress = false"
      @submit="change"
    ></AddressPicker>
  </view>
</template>

<script>
import AddressPicker from './components/AddressPicker.vue'
import {
  postAddress
} from '@/api/user.js'

export default {
  components: { AddressPicker },
  data() {
    return {
      source: null,
      addressData: {
        realName: '',
        phone: '',
        detail: '',
        isDefault: false,
      },
      planLocate: '省、市、区',
      addressForm: {
        province: '',
        provinceId: '',
        city: '',
        city_id: '',
        district: '',
        districtId: '',
      },
      showAddress: false,
    }
  },
  onLoad(option) {
    if (option.source) this.source = option.source

    console.log(this.source)
    let title = ''
    if (option.type === 'edit') {
      title = '编辑收货地址2'
      let resData = JSON.parse(option.data)
      this.addressData = {
        id: resData.id,
        realName: resData.realName,
        phone: resData.phone,
        detail: resData.detail,
        isDefault: resData.isDefault == 1,
      }
      this.addressForm = {
        province: resData.province,
        provinceId: resData.provinceId,
        city: resData.city,
        city_id: resData.city_id,
        district: resData.district,
        districtId: resData.districtId,
      }
      if (resData.province && resData.city && resData.district)
        this.planLocate = `${resData.province} ${resData.city} ${resData.district}`
      else this.planLocate = ''
    } else {
      title = '新增收货地址'
    }
    this.manageType = option.type
    uni.setNavigationBarTitle({
      title: title,
      fail: res => {
        console.log(res, 'fail-res')
      },
    })
  },
  methods: {
    change(result) {
      this.planLocate = ''
      result.forEach((item, index) => {
        if (index === 0) {
          this.planLocate += item.name
        } else {
          this.planLocate += ' ' + item.name
        }
      })
      this.addressForm = {
        province: result[0].name,
        provinceId: result[0].id,
        city: result[1].name,
        city_id: result[1].id,
        district: result[2].name,
        districtId: result[2].id,
      }
      this.showAddress = false
    },
    //选择省市组件回调
    switchChange(e) {
      this.addressData.isDefault = e.detail.value
    },

    //地图选择地址
    chooseLocation() {
      uni.chooseLocation({
        success: data => {
          this.addressData.detail = data.name
        },
      })
    },

    //提交
    async confirm() {
      let data = this.addressData
      if (!data.realName) {
        uni.$u.toast('请填写收货人姓名')
        return
      }
      if (!/^1[3-9][0-9]{9}$/.test(data.phone)) {
        uni.$u.toast('请输入正确的手机号码')
        return
      }
      if (!(this.planLocate && this.planLocate != '省、市、区')) {
        uni.$u.toast('请选择所在地区')
        return
      }
      if (!data.detail) {
        uni.$u.toast('请在地图选择所在位置')
        return
      }
      console.log("manageType1="+this.manageType)
        let obj = { ...this.addressData }
        obj.address = this.addressForm
        console.log(obj)
        await postAddress(obj)
      // 编辑
      // if (this.manageType == 'edit') {
      //   await updateUserAddressApi({
      //     ...this.addressData,
      //     ...this.addressForm,
      //   })
      // } else {
      //   await addUserAddressApi({
      //     ...this.addressData,
      //     ...this.addressForm,
      //   })
      // }
      //this.$prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
      // if (this.source == 1) {
      //   this.$prePage().$vm.refreshList(data, this.manageType)
      // } else {
      // }
      this.$prePage().$vm.getaddressList()
      uni.$u.toast(`地址${this.manageType == 'edit' ? '修改' : '添加'}成功`)
      setTimeout(() => {
        uni.navigateBack()
      }, 800)
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background: $page-color-base;
  padding-top: 16rpx;
}

.addressInput {
  ::v-deep .uni-input-wrapper {
    padding-right: 60rpx;
  }
}

.row {
  display: flex;
  align-items: center;
  position: relative;
  padding: 20rpx 30rpx;
  background: #fff;

  .tit {
    flex-shrink: 0;
    width: 140rpx;
    font-size: 30rpx;
    color: $font-color-dark;
  }

  .input {
    display: flex;
    align-items: center;
    background-color: #f8f8f8;
    border-radius: 25rpx;
    padding-left: 20rpx;
    flex: 1;
    font-size: 30rpx;
    height: 100rpx;
    color: $font-color-dark;
  }
  .inputAddress {
    background-color: #f8f8f8;
    border-radius: 25rpx;
    padding-left: 20rpx;
    padding-top: 20rpx;
    padding-right: 80rpx;
    height: 140rpx;
    flex: 1;
    font-size: 30rpx;
    color: $font-color-dark;
  }

  .area {
    max-width: 480rpx;
  }

  .arrow_right {
    position: absolute;
    right: 46rpx;
  }

  .dingwei_box {
    position: absolute;
    right: 46rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .ic_location {
      width: 34rpx;
      height: 34rpx;
    }

    text {
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
    }
  }
}

.default-row {
  margin-top: 16rpx;

  .tit {
    flex: 1;
  }

  switch {
    transform: translateX(16rpx) scale(0.9);
  }
}

.add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  // width: 690rpx;
  // height: 80rpx;
  margin: 60rpx auto;
  font-size: $font-lg;
  color: #fff;
  background-color: #FF5900;
  border-radius: 10rpx;
  width: 630rpx;
  height: 90rpx;
  border-radius: 45rpx;
}

.icon-a-locationhl {
  font-size: 28rpx !important;
  color: #FF5900 !important;
}
</style>
